@import url('@/style.less');
.page {
	position: relative;
	padding: 35rpx 45rpx;
}
.logo {
	width: 100%;
	margin-top: 30rpx;
	margin-bottom: 45rpx;
}
.add {
	color: @font-color;
	position: absolute;
	top: 50rpx;
	display: flex;
	.icon {
		margin-right: 10rpx;
		width: 50rpx;
	}
	text {
		color: @background-color;
		font-size: 34rpx;
	}
}
.item{
    border: solid #e0e0e0 1rpx;
    padding: 30rpx;
    background-color: #f7f9fd;
    border-radius: 15rpx;
    margin-bottom: 45rpx;
    .header{
        display: flex;
        justify-content: space-between;
        border-bottom: solid #e0e0e0 1rpx;
        padding-bottom: 20rpx;
        margin-bottom: 20rpx;
        .left{
            display: flex;
            .icon{
                width: 46rpx;
                margin-right: 20rpx;
                margin-top: -5rpx;
            }
            text{
                font-size: 32rpx;
                color: @font-color;
            }
            .blue{
                color: @background-color;
            }
            .red{
                color: #ff4234;
            }
        }
        .right{
            text{
                font-size: 32rpx;
                color: @background-color;
            }
        }
    }
    .content{
        position: relative;
        .title{
            font-size: 34rpx;
            color: @font-color;
            margin-bottom: 15rpx;
        }
        .attr{
            display: flex;
            flex-wrap: wrap;
            line-height: 54rpx;
            color: #999;
            font-size: 30rpx;
            // padding: 15rpx 0;
            margin-bottom: 10rpx;
            .timer,.creator,.place{
                margin-right: 35rpx;
                display: flex;
                .icon{
                    width: 36rpx;
                    margin-right: 10rpx;
                    margin-top: 12rpx;
                }
            }
        }
        .desc{
            color: #999;
            font-size: 30rpx;
            line-height: 1.6;
        }
        .btn{
            position: absolute;
            right: 0rpx;
            top:20rpx;
            background-color: @background-color;
            color: #fff;
            width: 140rpx;
            height: 60rpx;
            border-radius: 30rpx;
            line-height: 60rpx;
            font-size: 30rpx;
            &:active{
                background-color: @background-color-active;
            }
            &::after{
                border: none;
            }
        }
    }
}
// .item {
// 	border: solid #e0e0e0 1rpx;
// 	padding: 30rpx;
// 	background-color: #f7f9fd;
// 	border-radius: 15rpx;
// 	margin-bottom: 45rpx;
// 	.header {
// 		display: flex;
// 		justify-content: space-between;
// 		border-bottom: #e0e0e0 solid 1rpx;
// 		padding-bottom: 20rpx;
// 		margin-bottom: 20rpx;
// 		.left {
// 			display: flex;
// 			.icon {
// 				width: 46rpx;
// 				margin-right: 20rpx;
// 				margin-top: -5rpx;
// 			}
// 			text {
// 				font-size: 32rpx;
// 				color: @font-color;
// 			}
// 			.blue {
// 				color: @background-color;
// 			}
// 			.red {
// 				color: #ff4234;
// 			}
// 		}
// 		.right {
// 			text {
// 				font-size: 32rpx;
// 				color: @background-color;
// 			}
// 		}
// 	}
// 	.content {
// 		position: relative;
// 		.title {
// 			font-size: 34rpx;
// 			color: @font-color;
// 		}
// 		.attr {
// 			display: flex;
// 			flex-wrap: wrap;
// 			color: #999;
// 			font-size: 30rpx;
// 			line-height: 54rpx;
// 			margin-bottom: 10rpx;
// 			//padding: 15rpx 0;
// 			.timer,
// 			.creator,
// 			.place {
// 				// margin: 10rpx 0;
// 				margin-right: 35rpx;
// 				display: flex;
// 				.icon {
// 					width: 36rpx;
// 					margin-right: 10rpx;
// 					margin-top: 12rpx;
// 				}
// 			}
// 			// .place {
// 			// 	margin-right: 0;
// 			// }
// 		}
// 		.desc {
// 			color: #999;
// 			font-size: 30rpx;
// 			line-height: 1.6;
// 		}
// 		.btn {
// 			background-color: @background-color;
// 			color: #fff;
// 			width: 140rpx;
// 			line-height: 60rpx;
// 			height: 60rpx;
// 			font-size: 30rpx;
// 			padding: 0 10rpx;
// 			border-radius: 30rpx;
// 			position: absolute;
// 			right: 0rpx;
// 			top: 20rpx;
// 			&:active {
// 				background-color: @background-color-active;
// 			}
// 			&::after {
// 				border: none;
// 			}
// 		}
// 	}
// }
